<!-- 用户管理 -->
<template>
	<div class="systemUserAdmin" v-loading="systemUserAdminLoading">
		<div class="title">用户管理</div>
    <div class="searchBox">
      <el-form ref="form" :model="searchForm" size="mini" inline>
        <el-form-item label="用户类型">
          <!-- <el-input v-model="searchForm.role" placeholder="用户类型"></el-input> -->
          <el-select v-model="searchForm.role" placeholder="请选择用户类型">
              <el-option label="管理员" value="admin"></el-option>
              <el-option label="运维人员" value="operator"></el-option>
              <el-option label="水站管理员" value="station"></el-option>
              <el-option label="环保管理部门" value="manager"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账号" label-width="90px">
          <el-input v-model="searchForm.account" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="greenBtn" size="mini" @click="onSubmit({pageSize: pageSize, pageNum: 1})">确定</el-button>
          <!-- <el-button type="primary" class="greenBtn" size="mini" @click="added">添加</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <div class="tableBox">
      <el-table :data="userAdminList.data" border size="mini"
        style="width: 100%" :header-cell-style="{color: '#444444',}"
      > 
        <el-table-column
          prop="id"
          label="编号"
          align="center">
          <template slot-scope="{$index}">
            {{$index + 1}}
          </template>
        </el-table-column>
        <el-table-column
          prop="username"
          label="姓名"
          align="center">
        </el-table-column>
        <el-table-column
          prop="account"
          label="账号"
          align="center">
        </el-table-column>
        <el-table-column
          prop="roleName"
          label="角色类型"
          align="center">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系电话"
          align="center">
        </el-table-column>
        <el-table-column
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="routerDetail(scope.row.account)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <myPaging :func="pageUpdate" :total="userAdminList.total"></myPaging>

    <el-dialog width="70%" :visible.sync="addedFormVisible">
      <div slot="title">
        <p>新增</p>
      </div>
      <el-form :model="addedForm" :rules="addedFormRules" size="mini" ref="addedForm" label-width="100px" v-loading="addedFormLoading">
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="username" label-width="80px">
              <el-input v-model="addedForm.username" placeholder="姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="gender" >
              <el-select v-model="addedForm.gender" placeholder="请选择性别" style="width: 100%">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="出生年月" prop="birth" label-width="80px">
              <el-date-picker
                v-model="addedForm.birth"
                type="date"
                :clearable="false"
                style="width: 100%"
                value-format="yyyy-MM-dd"
                placeholder="请选择出生年月">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="毕业院校" prop="school" >
              <el-input v-model="addedForm.school" placeholder="请填写毕业院校"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="专业" prop="profession" label-width="80px">
              <el-input v-model="addedForm.profession" placeholder="请填写专业"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="技术职称" prop="technicalTitle" >
              <el-input v-model="addedForm.technicalTitle" placeholder="请填写技术职称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="身份证" prop="identity" label-width="80px">
              <el-input v-model="addedForm.identity" placeholder="身份证"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色类型" prop="roleId">
              <el-select v-model="addedForm.roleId" placeholder="请选择角色类型" style="width: 100%">
                <el-option label="运维人员" value="2"></el-option>
                <el-option label="水站管理员" value="3"></el-option>
                <el-option label="环保管理部门" value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号" prop="phone" label-width="80px">
              <el-input v-model="addedForm.phone" placeholder="手机号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="experience">
          <div class="subTit">
            从业经历
            <span>
              <el-button class="greenBtn" size="mini" @click="addInput('innerMap', ['startTime', 'endTime', 'company'])">新增一项</el-button>
              <el-button size="mini" @click="delInput('innerMap')">删除</el-button>
            </span>
          </div>
          <p v-for="(item, index) of addedForm.experienceTemp.innerMap" :key="index">
            <el-col :span="14">
              <el-form-item label="时间" label-width="80px">
                <el-col :span="11">
                  <el-date-picker
                    v-model="item.startTime"
                    type="date"
                    :clearable="false"
                    style="width: 100%"
                    value-format="yyyy-MM-dd"
                    placeholder="选择开始日期">
                  </el-date-picker>
                </el-col>
                <el-col :span="2" class="line"> - </el-col>
                <el-col :span="11">
                  <el-date-picker
                    v-model="item.endTime"
                    type="date"
                    :clearable="false"
                    style="width: 100%"
                    value-format="yyyy-MM-dd"
                    placeholder="选择结束日期">
                  </el-date-picker>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="工作单位" label-width="80px">
                <el-input v-model="item.company" placeholder="工作单位"></el-input>
              </el-form-item>
            </el-col>
          </p>
        </el-row>

        <el-form-item label="上传头像" label-width="80px" style="margin-top: 20px;" prop="photoList">
          <el-upload
            ref="uploadPhoto"
            action=""
            :file-list="addedForm.photoList"
            list-type="picture-card"
            multiple
            :limit="1"
            :on-change="uploadChange"
            :on-exceed="uploadExceed" 
            :http-request="handleSubmit"
            :auto-upload="false"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label-width="80px">
          <el-button type="primary" class="greenBtn" size="mini" @click="addedSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
	</div>
</template>
<script>
import myPaging from '@/components/myPaging.vue'
import {mapActions, mapGetters} from 'vuex'
export default {
  name: 'systemUserAdmin',
  data () {
    return {
      msg: 'hello systemUserAdmin!',
      systemUserAdminLoading: false,
      searchForm: {
        role: '',
        account: '',
      },
      addedFormVisible: false,
      addedFormLoading: false,
      addFormData: {},
      addedForm: {
        birth: '2000-10-1',                 //出生日期
        gender: '1',                //性别 0女 1男
        identity: '445281199908101111',              //身份证
        phone: '13011111111',                 //手机号
        profession: 'test user add',            //专业
        roleId: '2',                //角色类型id
        school: 'test user add',                //毕业院校
        technicalTitle: 'test user add',        //技术职称
        username: 'zhou test',              //姓名
        photoList: [],             //头像
        experienceTemp: {          //从业经历
          innerMap: [
            {
              startTime: '1999-08-18',
              endTime: '2991-08-18',
              company: 'test user add',
            },
          ]
        }
      },
      addedFormRules: {
        username: [
          { required: true, message: '请填写姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请填写手机号', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        birth: [
          { type: 'string', required: true, message: '请选择时间', trigger: 'change' }
        ],
        school: [
          { required: true, message: '请填写毕业院校', trigger: 'blur' }
        ],
        profession: [
          { required: true, message: '请填写专业', trigger: 'blur' }
        ],
        technicalTitle: [
          { required: true, message: '请选择技术职称', trigger: 'change' }
        ],
        identity: [
          { required: true, message: '请填写身份证', trigger: 'blur' }
        ],
        roleId: [
          { required: true, message: '请选择角色类型', trigger: 'change' }
        ],
        photoList: [
          { required: true, message: '请选择头像', trigger: 'change' }
        ],
      },
		}
  },
  components: {
    myPaging
  },
  created() {
    this.onSubmit()
  },
	methods: {
    ...mapActions([
      'fetchUserList',
      'postSystemUserAdd'
    ]),
    async onSubmit(pageOption = {pageSize: this.pageSize, pageNum: 1}) {
      this.systemUserAdminLoading = true

      await this.fetchUserList({...this.searchForm, ...pageOption})

      this.systemUserAdminLoading = false
    },
    addedSubmit() {
      this.$refs['addedForm'].validate(async (valid) => {
        if(valid) {
          if(this.addedForm.photoList.length > 0) {
            this.addedFormLoading = true
            this.addFormData = new FormData()
            let addedForm = this.addedForm
            this.$refs.uploadPhoto.submit()
            for(let i in addedForm) {
              this.loopAppend(this.addFormData, i, addedForm[i])
            }
            this.addFormData.append('experienceTemp', JSON.stringify(addedForm.experienceTemp))
            let result = await this.postSystemUserAdd(this.addFormData)
            if(result.message !== 'success') {
              this.$notify({
                type: 'warning',
                title: '提示',
                message: result.info,
              })
            }else {
              this.$alert(`你的账号：<span style="user-select: all;">${result.account}</span>，你的密码：<span style="user-select: all;">${result.password}</span>，请牢记！！`, '新增成功', {
                dangerouslyUseHTMLString: true,
                confirmButtonText: '确定',
                // callback: action => {
                //   this.$message({
                //     type: 'info',
                //     message: `action: ${ action }`
                //   });
                // }
              })
              this.$refs['addedForm'].resetFields();
              this.addedFormVisible = false
              this.onSubmit()
            }
            this.addedFormLoading = false
          }else {
            this.$notify.warning({
              title: '警告',
              message: '最少上传1张图片',
            })
          }
        }else {
          return false;
        }
      })
    },
    added() {
      this.addedFormVisible = true
    },
    loopAppend(formData, key, value) {
      if(key != 'experienceTemp' && key != 'photoList') {
        formData.append(key, value)
      }
    },
    uploadChange(file, fileList){
			this.addedForm.photoList = fileList
    },
    uploadExceed(files, fileList) {
			this.$notify.warning({
				title: '警告',
				message: '最多上传1张头像',
			})
    },
    handleSubmit(response) {
			this.addFormData.append('photos', response.file)
    },
    routerDetail(id) {
    },
    pageUpdate(option) {
      this.onSubmit(option)
    },
    addInput(key, newInput) {
      let group = this.addedForm.experienceTemp[key]
      let newitem = {}
      newInput.map((item) => {
        newitem[item] = ''
      })
      group.push(newitem)
    },
    delInput(key) {
      let group = this.addedForm.experienceTemp[key]
      if(group.length > 1) {
        group.splice(-1)
      }
    },
    routerDetail(account) {
      this.$router.push({path: '/system/userAdmin/detail', query:{account}})
    }
  },
  computed: {
    ...mapGetters({
      stationList: 'getStationList',
      userAdminList: 'getUserAdminList',
      userInfo: 'getUserInfo',

      //分页依赖
      pageSize: 'getPageSize',
    })
  },
}
</script>
<style scoped>
.systemUserAdmin {
  background: #fff;
  min-height: 100%;
  padding: 0 20px 0 20px;
}
.systemUserAdmin .title {
  position: relative;
  left: 15px;
  line-height: 70px;
  font-size: 16px;
}
.systemUserAdmin .title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}
.searchBox {
  background: #fff;
  margin-bottom: 15px;
}
.experience .line {
  text-align: center;
}
.experience {
  margin-top: 20px;
  
}
.experience .subTit {
  font-size: 18px;
  color: #444;
  line-height: 44px;
  margin-bottom: 15px;
}
</style>
<style>
.systemUserAdmin .el-dialog__header {
  background-image: linear-gradient(90deg, 
    #4eb2ff 0%, 
    #0b69cb 100%
  ), 
  linear-gradient( 
    #1e87f0,
    #1e87f0
  );
  padding: 20px;
  color: #fff;
}
.systemUserAdmin .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
</style>

